<template>
	<view class="address" v-if="token">
		<view v-if="AddressList[0]">
			<view class="item" v-for="(item,i) in AddressList" :key="i" @longpress="dolongpress">
				<view class="flebox">
					<view class="left" v-if="wayis">
						<u-radio-group v-model="value">
							<u-radio @change="radioChange(i)" :name="item.id" active-color="#01C3A8"></u-radio>
						</u-radio-group>
					</view>
					<view class="right">
						<view class="line1">
							<view class="default" v-if="item.isDefault == '1'">默认</view>
							<view class="info">{{item.house_number}}</view>
						</view>
						<view class="line2">{{item.city}}{{item.remark}}</view>
						<view class="line3">{{item.title}}（先生/女士）{{item.mobile}}</view>
					</view>
				</view>
				<!-- 右侧图标 -->
				<view class="fixed">
					<u-icon name="minus-circle-fill" size="44rpx" color="red" v-if="removeis"
						@click="doremove(item.id)" />
					<u-icon name="edit-pen" size="32rpx" color="#01C3A8" v-else @click="changeadd(item)" />
				</view>
			</view>
		</view>
		<!-- 无内容 -->
		<Blankpage v-else></Blankpage>
		<!-- 删除状态 -->
		<view class="remove" v-if="removeis">
			<view class="title" @click="removeis = false">退出管理</view>
		</view>
		<!-- 新增状态 -->
		<view class="btn-box" @click="ToAdd" v-else>
			<button class="btn">新增地址</button>
		</view>
	</view>
	<!-- 未登录 -->
	<Blankpage v-else></Blankpage>
</template>

<script>
	import { ResAddressList, ResDelAddress } from '@/untils/api.js'
	import { Blankpage } from '@/components/Blankpage/Blankpage.vue'
	export default {
		components: {
			Blankpage
		},
		data() {
			return {
				wayis: false,
				AddressList: [],
				value: '',
				removeis: false, // 判断删除状态
				checked: false,
				token: uni.getStorageSync('token') || ''
			}
		},
		onShow() {
			this.getAddressList()
		},
		onLoad(option) {
			this.wayis = JSON.parse(option.wayis)
		},
		onPullDownRefresh() {
			this.getAddressList()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			async doremove(id) {
				let idObj = {
					address_id: id
				}
				const { data: res } = await ResDelAddress(idObj)
				if (res.code != 1) return uni.$showMsg(res.msg)
				// 删除成功重新获取数据
				this.getAddressList()
				this.removeis = false

			},
			dolongpress() {
				this.removeis = true
			},
			// 点击选择地址
			radioChange(i) {
				let AddressObj = {
					newAddress: this.AddressList[i].city + this.AddressList[i].remark + this.AddressList[i]
						.house_number,
					address_id: this.AddressList[i].id
				}
				uni.$emit('getaddress', AddressObj)
				uni.navigateBack()
			},
			// 跳转到修改页面
			changeadd(e) {
				uni.navigateTo({
					url: `/pages/Address/Addaddress?data=${JSON.stringify(e)}&iessue=false`
				})
				uni.setNavigationBarTitle({
					title: "修改地址"
				})
			},
			// 跳转到新增页面
			ToAdd() {
				uni.navigateTo({
					url: '/pages/Address/Addaddress?iessue=true'
				})

			},
			async getAddressList() {
				const { data: res } = await ResAddressList()
				this.AddressList = res.data.rows
				console.log(res, '我的地址');
			},
			ToMy() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address {
		padding-bottom: 120rpx;
		overflow-x: hidden;
	}

	.address .item {
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #EEEEEE;
		margin: 20rpx 32rpx;
		position: relative;
	}

	.flebox {
		display: flex;
		align-items: center;
	}

	.address .item .line1 {
		width: 100%;
		display: flex;
		align-items: flex-end;
	}

	.address .item .line1 .default {
		margin-right: 10rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: #00C7A7;
		padding: 2rpx 6rpx;
		border: 1rpx solid #8BA4A1;
		border-radius: 4rpx;
		background: #F0FFFC;
	}

	.address .item .line1 .info {
		font-size: 28rpx;
		font-weight: 600;
		color: #000000;
	}

	.address .item .line2 {
		margin: 10rpx 0;
		font-size: 24rpx;
		font-weight: 400;
		color: #000000;
	}

	.address .item .line3 {
		font-size: 24rpx;
		font-weight: 400;
		color: #B3B3B3;
	}

	.address .item .fixed {
		position: absolute;
		right: 62rpx;
		bottom: 62rpx;
	}

	.btn-box {
		padding: 0 23rpx;
		position: fixed;
		bottom: 20rpx;
		left: 0;

		.btn {
			width: 704rpx;
			height: 89rpx;
			border-radius: 50rpx;
			line-height: 89rpx;
			font-size: 26rpx;
			color: #fff;
			background-color: #01C3A8;
		}
	}

	.remove {
		width: 100%;
		height: 137rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 18rpx 0 48rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0rpx -2rpx 12rpx 0rpx rgba(0, 0, 0, 0.07);

		.title {
			color: #F64D4A;

		}

	}
</style>
